<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="老人姓名" prop="name">
        <el-input v-model.trim="form.name" placeholder="老人姓名">
          <el-button slot="append" @click="clickSearch">搜索老人</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="老人体温" prop="tiwen">
        <el-input v-model.trim="form.tiwen" placeholder="老人体温">
          <el-button slot="append">℃</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="获得积分" prop="name">
        <el-input v-model.trim="form.jifen" placeholder="获得积分"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" prop="start_time">
        <el-date-picker
          v-model="form.start_time"
          align="right"
          type="datetime"
          placeholder="请选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="end_time">
        <el-date-picker
          v-model="form.end_time"
          align="right"
          type="datetime"
          placeholder="请选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="老人图片" prop="image">
        <div class="older-uploader">
          <img v-if="form.image" class="older-avatar" :src="form.image" alt="">
          <i v-else class="el-icon-plus imgs-uploader-icon" @click="handleImage" aria-hidden="true"></i>
        </div>
        <p class="contract-text d2-mt-10">搜索老人图片自动填写</p>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancle">关闭</el-button>
      </el-form-item>
    </el-form>
    <!-- 老人列表 -->
    <el-drawer title="老人列表" :size="1000" :visible.sync="dialogOlderVisible" :destroy-on-close="true" @close="dialogOlderVisible = false" :wrapperClosable="false" :modal="false" :with-header="false" direction="rtl">
      <activity-older @close="dialogOlderVisible = false" :name="olderName" @sure="sure"></activity-older>
    </el-drawer>
  </div>
</template>

<script>
import * as APIDailycare from '@/api/dailycare'
import { mapState } from 'vuex'
// import * as RegExp from '@/utils/RegExp'
import activityOlder from './activity-older'
export default {
  name: 'activity-repair',
  components: {
    activityOlder
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    aid: {
      type: String,
      default: ''
    }
  },
  computed: {
    /* ...mapState('d2admin/user', [
      'info'
    ]), */
    /* ...mapState('facewebsocket', [
      'deviceMsg',
      'sendFaceMsg'
    ]) */
  },
  data () {
    return {
      // 老人姓名
      olderName: '',
      // 活动id
      dialogOlderVisible: false,
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: '重新生成老人id', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入老人姓名', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入老人住址', trigger: 'blur' }
        ],
        /* idcard: [
          {
            pattern: RegExp.IDCard,
            message: '请输入正确的身份证号',
            trigger: 'blur'
          }
        ], */
        image: [
          {
            required: true,
            message: '请上传活动图片',
            trigger: 'blur'
          }
        ]
      },
      fileList: [],
      faceList: []
    }
  },
  methods: {
    clickSearch () {
      if (!this.form.name) {
        this.$message.warning('请先输入姓名')
        return false
      }
      this.olderName = this.form.name
      this.dialogOlderVisible = true
    },
    // 确定搜索的老人
    sure (row) {
      this.form = {
        ...this.form,
        ...{
          oid: row.id,
          name: row.name,
          image: row.image
        }
      }
    },
    handleImage () {
      this.$message.warning('搜索老人自动填写图片')
    },
    // 添加
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const form = { ...this.form, ...{ a_id: this.aid } }
          APIDailycare.riusersTianjia(form).then(res => {
            this.load()
            this.cancle()
          })
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  }
}
</script>

<style lang="scss">
.el-select{
  width: 100%;
}
.el-date-editor.el-input{
  width: 100%;
}
.type-add-input {
  textarea {
    font-family: arial;
  }
}
i.icon-uploader-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  vertical-align: bottom;
}
.task-image {
  width: 80px;
  height: 80px;
  position: absolute;
  cursor: pointer;
  border: 1px solid #f5f7fa;
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
  }
  &:hover {
    // border: 1px dashed $theme-table-button-view-text-color;
  }
  i {
    font-size: 20px;
  }
}
.task-form-item {
  height: 33px;
}
.older-image {
  border: 1px solid transparent;
  box-sizing: border-box;
  width: 100%;
  height: 220px;
  img {
    width: 100%;
    height: 100%;
  }
}
.zhuapai_active {
  position: relative;
  width:100%;
  height: 220px;
  margin: 0 auto;
  text-align: center;
  color: #4ABE84;
  background-color: #fff;
  box-shadow:0px 2px 7px 0px rgba(85,110,97,0.35);
  border-radius:7px;
  border:1px solid rgba(74,190,132,1);
  box-sizing: border-box;
}
.zhuapai_active:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 17px solid #4ABE84;
  border-top-color: transparent;
  border-left-color: transparent;
}
.zhuapai_active:after {
  content: '';
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.older-uploader {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fbfdff;
}
.manage-uploader {
	.el-upload {
		width: 148px;
		height: 148px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
    background-color: #fbfdff;
	}
}
.manage-uploader .el-upload:hover {
	border-color: #409EFF;
}
.older-avatar {
  width: 100%;
  height: 100%;
}
.older-footer {
  margin-top: 20px;
  text-align: right;
}
i.imgs-uploader-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    vertical-align: bottom;
  }
</style>
